var focusState = 0;
var hiNum = "";
var userName = "";
var userEmail = "";
var $codeBox = $(".register-content");

// ie9及以上才加载代码雨
if(+[1,]){
  $(document).ready(function() {
    var width = coderain.width = screen.availWidth ;
    var height = coderain.height = screen.availHeight;
    var yPositions = Array(300).join(0).split('');
    var ctx = coderain.getContext('2d');
    var draw = function() {
      ctx.fillStyle = 'rgba(0,0,0,.05)';
      ctx.fillRect(0, 0, width, height);
      ctx.fillStyle = '#007d80';/*代码颜色*/
      ctx.font = '10pt Georgia';
      yPositions.map(function(y, index) {
           text = String.fromCharCode(1e2 + Math.random() * 330);
           x = (index * 10) + 10;
           coderain.getContext('2d').fillText(text, x, y);
           if (y > Math.random() * 1e4) {
              yPositions[index] = 0;
           } else {
              yPositions[index] = y + 10;
           }
      });
    };
    RunMatrix();
    function RunMatrix() {
      Game_Interval = setInterval(draw,30);
    }
  });
}
else {
  $(".main-box").attr("style","overflow-y:hidden");
  $(".main-box").append(
    '<div class="low-tip"><div></div><p>'+
    '开玩笑吧，竟然使用ie低版本访问。。/(ㄒoㄒ)/~~<br/>请使用ie9或以上版本，或者使用高级浏览器，例如 谷歌~'+
    '</p></div>'
  )
}


$(function(){

  // 活动日期及说明
  $(document).on("mouseenter",".date-step li",function(){
    var $this = $(this);
    var step = $this.index();
    var leftPx = "-" + 940*step + "px";
    $(".date-step li").removeClass("active");
    $this.addClass("active");
    $(".explain-step").css("left",leftPx);
  });

  //滚动到报名区自动获取焦点
  $(".main-box").scroll(function(){
    var $registerBox = $("#registerBox");
    if ($registerBox.offset().top < ($registerBox.height()-100)) {
      if( window.screen.width>1024 ){
        $("#registerBox input[type='text']").not(':disabled').last().focus();
      }
    }
  });

  //报名区输入框绑定回车事件
  bindFocus();

  // 回车键事件
  $(document).keypress(function(e) {
    if(e.which == 13) {
      focusFun(focusState);
    }
   });

  //  重新填写报名信息
  $(".re-write-btn").click(function(){
    $(".register-content").empty().append(
      '<div class="code-row">'+
        '请输入您的Hihocode账号：'+
        '<input type="text" name="hiNum" value=""/>'+
      '</div>'
    );
    bindFocus();
    $("[name='hiNum']").last().focus();
    $(this).hide();
  });


  //手机版活动说明
  $(document).on("click",".substep-title",function(){
    var $this = $(this);
    $(".substep-title").removeClass("active");
    $this.addClass("active");
    $(".substep-content").slideUp();
    $this.siblings(".substep-content").slideDown();
  })

})



// 报名区输入框绑定回车事件
function bindFocus() {
  $(".code-row input[type='text']").focus(function(){
    var focusInput = $(this).attr("name");
    if(focusInput == "hiNum") focusState=1;
    if(focusInput == "userName") focusState=2;
    if(focusInput == "userEmail") focusState=3;
  })
  .blur(function(){
    focusState = 0;
  });
}


// 报名回车键事件
function focusFun(focusState) {
  switch (focusState)
  {
    case 0:
      break;

    //检测Hihocode账号
    case 1:
      hiNum = getVal("hiNum");
      $("[name='hiNum']").prop("disabled",true);
      if(hiNum == ""){
        $codeBox.append(
          '<div class="code-row">'+
            '请输入您的Hihocode账号：'+
            '<input type="text" name="hiNum" value=""/>'+
          '</div>'
        );
        bindFocus();
        $("[name='hiNum']").last().focus();
      }
      else {
        $codeBox.append(
          '<div class="code-row">'+
            '请输入您的姓名：'+
            '<input type="text" name="userName" value="" />'+
          '</div>'
        );
        bindFocus();
        $("[name='userName']").last().focus();
        $(".re-write-btn").show();
      }
      break;

    //检测姓名
    case 2:
      userName = getVal("userName");
      $("[name='userName']").prop("disabled",true);
      if(userName == ""){
        $codeBox.append(
          '<div class="code-row">'+
            '请输入您的姓名：'+
            '<input type="text" name="userName" value=""/>'+
          '</div>'
        );
        bindFocus();
        $("[name='userName']").last().focus();
      }
      else {
        $codeBox.append(
          '<div class="code-row">'+
            '请输入您的邮箱：'+
            '<input type="text" name="userEmail" value="" />'+
          '</div>'
        );
        bindFocus();
        $("[name='userEmail']").last().focus();
      }
      break;

    //检测邮箱
    case 3:
      userEmail = getVal("userEmail");
      $("[name='userEmail']").prop("disabled",true);
      if(userEmail == ""){
        $codeBox.append(
          '<div class="code-row">'+
            '请输入您的邮箱：'+
            '<input type="text" name="userEmail" value=""/>'+
          '</div>'
        );
        bindFocus();
        $("[name='userEmail']").last().focus();
      }
      else if(!userEmail.match(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/)) {
        $codeBox.append(
          '<div class="code-row">'+
            '邮箱格式不正确请重新输入：'+
            '<input type="text" name="userEmail" value=""/>'+
          '</div>'
        );
        bindFocus();
        $("[name='userEmail']").last().focus();
      }
      else {
        $codeBox.append('...<br/><br/>');
        //todo 提交报名者信息；

        // 成功则显示
        setTimeout(function(){
          $codeBox.append(
            '报名成功！您的信息如下：<br/>'+
            '<div class="code-row">'+
              '<span>hihocode账号：</span>'+
              '<p>'+ hiNum+'</p>'+
            '</div>'+
            '<div class="code-row">'+
              '<span>姓名：</span>'+
              '<p>'+userName+'</p>'+
            '</div>'+
            '<div class="code-row">'+
              '<span>邮箱：</span>'+
              '<p>'+userEmail+'</p>'+
            '</div>'+
            '<br/>'+
            '初赛将于2017年4月16日开始，请准时参加，祝比赛愉快~<br/>'
          )
          .animate({
             scrollTop:$codeBox.prop('scrollHeight')-$codeBox.height()
          },300);
        },500);



        // 失败则
        // $codeBox.append(
        //   '<em>报名失败！</em><br/>'+
        //   '该hihocode账号已被使用，请重新填写报名信息。<br/><br/>'+
        //   '<div class="code-row">'+
        //     '请输入您的Hihocode账号：'+
        //     '<input type="text" name="hiNum" value=""/>'+
        //   '</div>'
        // )
        // .animate({
        //    scrollTop:$codeBox.prop('scrollHeight')-$codeBox.height()
        // },300);
        // bindFocus();
        // $("[name='hiNum']").last().focus();
      }
      break;
  }
}

//获取对象值并去除多余空格
function getVal(inputName){
  var val = $("[name='"+inputName+"']").last().val()
  return val.replace(/[ ]/g,""); //去除字符算中的空格
}
